<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      h2 {
        margin: 0;
      }
      #wrap {
        margin: 30px auto;
        width: 482px;
        padding: 5px;
        position: relative;
        border: 1px solid #000;
        background: #eee;
      }
      .title {
        font: bold 18px/40px "宋体";
        text-align: center;
        border-bottom: 1px solid #000;
      }
      #list {
        padding-left: 2px;
      }
      #list li {
        opacity: 0.8;
        font: 14px/36px "宋体";
        border-bottom: 1px solid #000;
      }
      #list li:hover {
        opacity: 1;
      }
      #list label input {
        margin: 0 20px 0 30px;
      }
      input[type="chekbox"] {
        width: 20px;
        height: 20px;
      }
      .footer {
        font: 16px/36px "宋体";
      }
    </style>
  </head>
  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list">
        <li>
          <input type="checkbox" checked="false" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li>
      </ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
        <a href="javascript:;" id="remove">删除</a>
        <input type="text" id="newInfo" />
        <a href="javascript:;" id="add">添加</a>
      </footer>
    </section>
    <script>
      document.querySelector("input").checked = false;
      // document.querySelector("input").setAttribute("checked",true);
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: true,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: false,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: true,
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];
      // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
      // 5.收藏和取消收藏功能
      // 先修改数据在渲染视图；
      function fn(data) {
        var listEle = document.querySelector("#list");
        listEle.innerHTML = "";
        data.forEach(function (item) {
          var liEle = document.createElement("li");
          liEle.innerHTML = ` <input type="checkbox" ${
            item.checked ? "checked" : ""
          } />
          <span>${item.title}</span>
          ${
            item.collect
              ? `<a href="javascript:;" class="collect">
                收藏
              </a>`
              : `<a href="javascript:;" class="cancelCollect">
                取消收藏
              </a>`
          }

          <a href="javascript:;" class="remove">删除</a>`;
          listEle.appendChild(liEle);
        });
        a();
      }
      fn(data);
      function a() {
        var lis = document.querySelectorAll("#list li");
        lis.forEach(function (li, key) {
          li.onclick = function (e) {
            var target = e.target;
            if (target.className == "collect") {
              console.log("点击收藏");
              data[key].collect = false;
              fn(data);
            }
            if (target.className == "cancelCollect") {
              console.log("点击取消收藏");
              data[key].collect = true;
              fn(data);
            }
            if (target.className == "remove") {
              data.splice(key, 1);
              fn(data);
            }
            if (target.nodeName == "INPUT") {
              data[key].checked = target.checked;
              console.log(target.checked);
            }
          };
        });
      }
      // 获取全选按钮
      var checkallEle = document.querySelector("#checkAll");
      checkallEle.onclick = function () {
        // console.log(this.checked);
        var that = this;
        data.forEach(function (item) {
          item.checked = that.checked;
        });
        fn(data);
      };

      // 判断是否全选
      function isCheckAll() {
        var res = data.every(function (item) {
          return item.checked;
        });
        checkallEle.checked = res;
      }

      // 删除勾选中的音乐
      var delEle = document.querySelector("#remove");
      delEle.onclick = function () {
        var res = data.filter(function (item) {
          return !item.checked;
        });

        data = res;
        // console.log(res);
        fn(data);
      };

      // 添加音乐操作；
      var addEle = document.querySelector("#add");
      var addInput = document.querySelector("#newInfo");
      addEle.onclick = function () {
        var value = addInput.value;
        var obj = {
          // id:data[data.length-1].id+1,
          id: data.length,
          title: value,
          checked: false,
          collect: false,
        };
        // console.log(obj);
        data.push(obj);
        // console.log(data);
        fn(data);
      };
    </script>
  </body>
</html>
